<template>
    <!-- 地址 -->
    <div>   
        <!-- 导航条 -->
        <base-nav title="地址管理" :showRight="true"></base-nav>
        <!-- 地址列表 -->
        <van-address-list
        v-model="userStore.nowActiveAddressId "
        :list="userStore.userAddressList"
        @add="onAdd"
        @edit="onEdit"  
        @select="onSelect"
        default-tag-text="默认"
       
        />
        <!-- 地址为空显示 -->
        <van-empty description="暂无地址"   v-show="!userStore.userAddressList.length" />
        <!-- 地址编辑列表 -->
        <van-action-sheet v-model:show="showAction" title="">
            <van-address-edit
            :area-list="areaList"
            show-delete
            show-set-default
            show-search-result
            
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @delete="onDelete"
            :address-info="userStore.AddressEditInfo"
            @change-default="onChangeDefault"
            
            />
        </van-action-sheet>
    </div>

    
</template>
<script setup lang="ts">
    import API from '../api'
    import { useUserStore } from '../store';
    import { areaList } from '@vant/area-data'
    import type {AddressEditInfo} from 'vant';
    
    let userStore = useUserStore()
    userStore.getAddressData()
    // const chosenAddressId = ref('1');
   
    
  
    // 显示面板
    let showAction = ref(false)
   
    // 点击新增
    let onAdd = () => {
        showAction.value = true;
        // userStore.AddressEditInfo = null;
        userStore.isEditId = 0;

        userStore.AddressEditInfo = {
            name: '',
            tel: '',
            province: '',
            city: '',
            county: '',
            addressDetail: '',
            areaCode: '',
            isDefault: ''
        };
    };

    // 点击保存
    let onSave = async(info: AddressEditInfo) => {
        //校验是否为编辑
        if(userStore.isEditId){
            let even = await API.getAddressData('/api_address',{
                status: 'deleteAddress',
				userId: userStore.TOKEN,
				addressId: userStore.isEditId
            });
        };
        //保存地址
        let orginData = {
            status: 'addAddress',
			isDefault: info.isDefault,
			isActive: false,
			addressId: new Date().getTime(),
			userId: userStore.TOKEN,
			takename: info.name,
			province: info.province,
			city: info.city,
			district: info.county,
			streetname: info.addressDetail,
			postcode: info.areaCode,
			tel: info.tel
        };
        console.log('info.isDefault',info.isDefault);

        let res = await API.getAddressData('/api_address',orginData)
       
        showAction.value = false;
        userStore.getAddressData();

        if(userStore.isEditId){
            showSuccessToast(`修改地址成功`);
            return
        };
        showSuccessToast(`新增地址成功`);
        
    };
    // 编辑 
    let onEdit = (item:AddressList, index: number) => {
      
        userStore.userAddressOriginList.forEach((subItem: AddressOrigin) => {
			if(item.id == subItem.address_id){
				//设置addressInfo
				userStore.AddressEditInfo = {
					name: subItem.takename,
					tel: subItem.tel,
					province: subItem.province,
					city: subItem.city,
					county: subItem.district,
					addressDetail: subItem.streetname,
					areaCode: subItem.postcode,
					isDefault: subItem.isDefault
				};
			}
		});
		 
		// 弹出框
	    showAction.value = true;
		// 设置
		userStore.isEditId = item.id;
    }
    // 设置默认地址
    let onChangeDefault = async(checked: boolean) =>{
        let even = await API.getAddressData('/api_address',{
            status: 'defaultAddress',
			userId: userStore.TOKEN,
			addressId: userStore.isEditId
        })

        // console.log(even);
        userStore.getAddressData();
        
    };
    // 删除
    let onDelete = async(val) => {

        let even = await API.getAddressData('/api_address',{
            status: 'deleteAddress',
            userId: userStore.TOKEN,
            addressId: userStore.isEditId
        })
     
        // 弹出框
	    showAction.value = false;
        showSuccessToast(`删除地址成功`);
        userStore.getAddressData();
	};
    // 选择地址
    let onSelect = async (item:AddressList, index: number) =>{
        // 请求
        let even = await API.getAddressData('/api_address',{
            status : 'activeAddress',
			userId : userStore.TOKEN,
			addressId: item.id
        });
    }


</script>

<style scoped lang="less">
</style>